<template>
  <div class="mp3">
    <div class="circle"></div>
    <div class="controller">
      <div class="progress-wrapper">
        <div ref="progress" class="progress-bar van-progress">
          <span class="van-progress__portion" :style="`width: ${positionX}px;`">
            <span
              class="van-progress__pivot play-dot"
              :style="`left: ${positionX}px;`"
              @mousedown="down"
              @touchstart.stop="down"
              @mousemove="move"
              @touchmove.stop="move"
              @mouseup="end"
              @touchend.stop="end"
            >
            </span>
          </span>
        </div>
        <div class="time-view">
          <div>{{ formatTime(audio?.currentTime) }}</div>
          <div>{{ formatTime(audio?.duration) }}</div>
        </div>
      </div>
      <div class="clocker">
        <picker @change="bindPickerChange" :value="currentIndex" :range="list">
          <div class="clocker-item">
            <svg
              t="1714049453305"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="10654"
              width="16"
              height="16"
            >
              <path
                d="M59.534884 154.790698m35.72093 0l464.372093 0q35.72093 0 35.72093 35.72093l0 0q0 35.72093-35.72093 35.72093l-464.372093 0q-35.72093 0-35.72093-35.72093l0 0q0-35.72093 35.72093-35.72093Z"
                fill="#9770f3"
                p-id="10655"
              ></path>
              <path
                d="M59.534884 416.744186m35.72093 0l464.372093 0q35.72093 0 35.72093 35.72093l0 0q0 35.72093-35.72093 35.720931l-464.372093 0q-35.72093 0-35.72093-35.720931l0 0q0-35.72093 35.72093-35.72093Z"
                fill="#9770f3"
                p-id="10656"
              ></path>
              <path
                d="M59.534884 678.697674m35.72093 0l202.418605 0q35.72093 0 35.72093 35.720931l0 0q0 35.72093-35.72093 35.72093l-202.418605 0q-35.72093 0-35.72093-35.72093l0 0q0-35.72093 35.72093-35.720931Z"
                fill="#9770f3"
                p-id="10657"
              ></path>
              <path
                d="M891.141953 101.399814v87.790139l-99.08986 53.200373a35.72093 35.72093 0 1 0 33.803907 62.940279l117.902884-63.309396a35.72093 35.72093 0 0 0 18.813023-31.470139V43.305674c0-26.624-28.064744-43.889116-51.83107-31.874976L690.259349 122.915721a35.72093 35.72093 0 0 0-19.610791 31.874977v656.157767a35.72093 35.72093 0 1 0 71.441861 0V176.75907l149.051534-75.371163z"
                fill="#9770f3"
                p-id="10658"
              ></path>
              <path
                d="M527.205209 708.393674a391.227535 391.227535 0 0 0-56.224744 11.787907c-123.904 35.530419-212.08707 124.332651-187.892093 208.729303 24.194977 84.372837 146.027163 112.949581 269.931163 77.419163 119.808-34.351628 189.082791-109.127442 189.082791-207.669582a35.72093 35.72093 0 1 0-71.441861 0c0 63.345116-45.782326 112.747163-137.323163 139.002047-91.028837 26.088186-171.341395 7.263256-181.581395-28.457675-10.24-35.72093 47.88986-94.243721 138.906791-120.343814a319.797581 319.797581 0 0 1 45.937116-9.644651 35.72093 35.72093 0 0 0-9.406512-70.822698z"
                fill="#9770f3"
                p-id="10659"
              ></path>
            </svg>
            <div class="out-time">列表</div>
          </div>
        </picker>

        <picker @change="handleDirection" :value="time" :range="timeOptionsValue">
          <div class="clocker-item">
            <svg
              t="1714047005304"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="9309"
              width="16"
              height="16"
            >
              <path
                d="M1024 512A512 512 0 1 1 512 0a512 512 0 0 1 512 512z m-48-16.018286h15.195429A479.341714 479.341714 0 0 0 528 32.786286v15.213714a16 16 0 1 1-32 0v-15.213714A479.341714 479.341714 0 0 0 32.804571 496h15.195429a16 16 0 1 1 0 32h-15.195429a479.341714 479.341714 0 0 0 463.195429 463.213714v-15.213714a16 16 0 0 1 32 0v15.213714a479.341714 479.341714 0 0 0 463.195429-463.213714h-15.195429a16 16 0 0 1 0-32zM736 528h-128v-32h128a16 16 0 1 1 0 32zM512 576a64 64 0 1 1 64-64 64 64 0 0 1-64 64z m0-96A32 32 0 1 0 544 512 32 32 0 0 0 512 480z m-16-288a16 16 0 0 1 32 0v224h-32V192z"
                fill="#9770f3"
                p-id="9310"
              ></path>
            </svg>
            <div class="out-time">{{ deltedTime ? formatTime(deltedTime) : '定时' }}</div>
          </div>
        </picker>
      </div>
      <div class="player">
        <div class="flex-row justify-center animation" @click="handleUp">
          <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M33.9534 10.2535C33.765 10.2535 33.5954 10.3315 33.4737 10.4567L22.3899 16.8558V10.9235C22.3897 10.7904 22.3499 10.6603 22.2754 10.5499C22.201 10.4395 22.0953 10.3538 21.972 10.3037C21.8486 10.2536 21.7131 10.2414 21.5827 10.2686C21.4524 10.2959 21.3332 10.3614 21.2402 10.4567L8.24617 17.9591V8.84014H8.2411C8.24188 8.82493 8.24578 8.81089 8.24578 8.79568C8.24567 8.53367 8.14165 8.2824 7.95653 8.09699C7.77141 7.91157 7.5203 7.80716 7.2583 7.80664H5.36602V7.816C5.1036 7.816 4.85194 7.92024 4.66638 8.1058C4.48083 8.29135 4.37659 8.54302 4.37659 8.80543C4.37659 8.82298 4.38088 8.83897 4.38166 8.85652V30.2937H4.39102C4.41363 30.5381 4.52661 30.7653 4.70785 30.9309C4.8891 31.0965 5.12559 31.1886 5.37109 31.1891C5.38279 31.1891 5.39371 31.186 5.40502 31.1856H7.18693C7.21462 31.1879 7.24153 31.1938 7.27 31.1938C7.816 31.1938 8.25943 30.7507 8.25943 30.2043C8.25943 30.1587 8.25202 30.1146 8.24578 30.0706V21.0452L21.2488 28.5527C21.3415 28.6443 21.459 28.7069 21.5868 28.7327C21.7146 28.7584 21.8471 28.7463 21.9681 28.6977C22.0891 28.6492 22.1933 28.5663 22.2678 28.4593C22.3423 28.3524 22.3839 28.2259 22.3876 28.0956H22.3895V22.1485L33.4823 28.5531C33.575 28.6447 33.6925 28.7073 33.8203 28.7331C33.9481 28.7588 34.0806 28.7467 34.2016 28.6981C34.3226 28.6496 34.4268 28.5667 34.5013 28.4597C34.5758 28.3527 34.6175 28.2263 34.6211 28.096H34.623V10.9235C34.6231 10.8356 34.6058 10.7484 34.5722 10.6671C34.5385 10.5859 34.4892 10.512 34.427 10.4498C34.3649 10.3875 34.291 10.3382 34.2098 10.3045C34.1285 10.2708 34.0414 10.2535 33.9534 10.2535Z"
              fill="#9770f3"
            />
          </svg>
        </div>
        <div class="play" @click="handlePlay">
          <svg v-if="!play" width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M21.7612 9.69127C22.3616 10.0105 22.8638 10.4871 23.214 11.07C23.5642 11.6529 23.7492 12.32 23.7492 13C23.7492 13.68 23.5642 14.3472 23.214 14.93C22.8638 15.5129 22.3616 15.9895 21.7612 16.3088L5.74625 25.0175C3.1675 26.4213 0 24.5963 0 21.71V4.29127C0 1.40377 3.1675 -0.419982 5.74625 0.981268L21.7612 9.69127Z"
              fill="#9770f3"
            />
          </svg>
          <svg v-else width="22" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15 24V0H22V24H15ZM0 24V0H7V24H0Z" fill="#9770f3" />
          </svg>
        </div>
        <div class="flex-row justify-center animation" @click="handleDown">
          <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M5.04659 28.7465C5.23496 28.7465 5.40461 28.6685 5.52629 28.5433L16.6101 22.1442V28.0765C16.6103 28.2096 16.6501 28.3397 16.7246 28.4501C16.799 28.5605 16.9047 28.6462 17.028 28.6963C17.1514 28.7464 17.2869 28.7586 17.4173 28.7314C17.5476 28.7041 17.6668 28.6386 17.7598 28.5433L30.7538 21.0409V30.1599H30.7589C30.7581 30.1751 30.7542 30.1891 30.7542 30.2043C30.7543 30.4663 30.8583 30.7176 31.0435 30.903C31.2286 31.0884 31.4797 31.1928 31.7417 31.1934H33.634V31.184C33.8964 31.184 34.1481 31.0798 34.3336 30.8942C34.5192 30.7086 34.6234 30.457 34.6234 30.1946C34.6234 30.177 34.6191 30.161 34.6183 30.1435V8.70635H34.609C34.5864 8.46189 34.4734 8.23466 34.2921 8.06906C34.1109 7.90347 33.8744 7.81142 33.6289 7.81091C33.6172 7.81091 33.6063 7.81403 33.595 7.81442H31.8131C31.7854 7.81208 31.7585 7.80623 31.73 7.80623C31.184 7.80623 30.7406 8.24927 30.7406 8.79566C30.7406 8.84129 30.748 8.88536 30.7542 8.92943L30.7542 17.9548L17.7512 10.4473C17.6585 10.3557 17.541 10.2931 17.4132 10.2673C17.2854 10.2416 17.1529 10.2537 17.0319 10.3023C16.9109 10.3508 16.8067 10.4337 16.7322 10.5407C16.6577 10.6476 16.6161 10.7741 16.6124 10.9044H16.6105L16.6105 16.8515L5.51771 10.4469C5.42499 10.3553 5.30751 10.2927 5.17971 10.2669C5.0519 10.2412 4.91936 10.2533 4.79836 10.3019C4.67737 10.3504 4.57321 10.4333 4.49869 10.5403C4.42417 10.6473 4.38253 10.7737 4.37891 10.904H4.37696L4.37696 28.0765C4.37691 28.1644 4.39419 28.2516 4.42782 28.3329C4.46145 28.4141 4.51077 28.488 4.57295 28.5502C4.63514 28.6125 4.70898 28.6618 4.79025 28.6955C4.87151 28.7292 4.95862 28.7465 5.04659 28.7465Z"
              fill="#9770f3"
            />
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, ref, nextTick } from 'vue';
const timeOptions = [
  {
    label: '关闭',
    value: 0,
  },
  {
    label: '5分钟',
    value: 5,
  },
  {
    label: '10分钟',
    value: 10,
  },
  {
    label: '20分钟',
    value: 20,
  },
  {
    label: '30分钟',
    value: 30,
  },
  {
    label: '60分钟',
    value: 60,
  },
  {
    label: '90分钟',
    value: 90,
  },
];
const timeOptionsValue = computed(() => timeOptions.map((item) => item.label));

const audio = ref(null);
const time = ref(3);
const list = ref([]);
const currentSrc = ref('');
const currentIndex = ref(0);
const maxWidth = ref(0);
const dx = ref(0);
const flags = ref(false);
const play = ref(false);
const timer = ref(null);
const progress = ref(null);
const deltedTime = ref(0);
const positionX = computed(() => (audio.value?.currentTime / audio.value?.duration) * progress.value?.offsetWidth);

const initAudio = () => {
  const { currentSrc, currentTime = 0 } = uni.getStorageSync('playInfo') || {};
  nextTick(() => {});
  getALlMp3Name();
  audio.value = uni.createInnerAudioContext();
  audio.value.autoplay = false;
  audio.value.onEnded(handleEnded);
  audio.value.onTimeUpdate(setCurrent);
  audio.value.src = currentSrc || list.value[0];
  audio.value.currentTime = currentTime;
};

// 转时分秒的函数
function formatTime(time) {
  const minute = Math.floor(time / 60);
  const second = Math.floor(time % 60);
  return `${minute}:${second < 10 ? '0' + second : second}`;
}

const handleDirection = (val) => {
  time.value = val.detail.value;
  deltedTime.value = timeOptions[time.value].value * 60;
  clearInterval(timer.value);
  if (!deltedTime.value) return;
  timer.value = setInterval(() => {
    if (deltedTime.value <= 0) {
      audio.value.pause();
      clearInterval(timer.value);
    }
    deltedTime.value--;
  }, 1000);
};
const getALlMp3Name = () => {
  const req = import.meta.glob('../../static/mp3/*');
  list.value = Object.keys(req).map((item) => item.replace('../..', ''));
};
const setCurrent = () => {
  uni.setStorageSync('playInfo', {
    currentSrc: audio.value.src,
    currentTime: audio.value.currentTime,
    duration: audio.value.duration,
  });
};
const handlePlay = () => {
  play.value ? audio.value.pause() : audio.value.play();
  play.value = !play.value;
};
const handleEnded = () => {
  handleDown();
};
const handleDown = () => {
  let index = list.value.findIndex((i) => i === audio.value.src);
  index = index === list.value.length - 1 ? 0 : index + 1;
  audio.value.src = list.value[index];
  setCurrent();
  audio.value.play();
};
const handleUp = () => {
  let index = list.value.findIndex((i) => i === audio.value.src);
  index = index === list.value.length - 1 ? index - 1 : list.value.length - 1;
  audio.value.src = list.value[index];
  audio.value.play();
};
const bindPickerChange = (e) => {
  currentIndex.value = e.detail.value;
  currentTime.value = 0;
  currentSrc.value = list.value[currentIndex.value];
};
const down = () => {
  flags.value = true;
  maxWidth.value = progress.value.offsetWidth;
  dx.value = progress.value.offsetLeft;
};
let position = 0;
const move = (event) => {
  if (flags.value) {
    var touch;
    if (event.touches) {
      touch = event.touches[0];
    } else {
      touch = event;
    }
    // 定位滑块的位置
    position = touch.clientX - dx.value;
    // 限制滑块超出页面
    if (position < 0) {
      position = 0;
    } else if (position > maxWidth.value) {
      position = maxWidth.value; // 308
    }
    // 阻止页面的滑动默认事件
    document.addEventListener(
      'touchmove',
      () => {
        event.preventDefault();
      },
      false,
    );
  }
};
const end = () => {
  const time = (position / maxWidth.value) * audio.value.duration;
  audio.value.currentTime = time;
  setCurrent();
  flags.value = false;
};
onMounted(initAudio);
</script>

<style lang="scss">
.mp3 {
  width: 100vw;
  height: 100vh;
  background-color: #eaeaea;
  position: relative;
  .circle {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    width: 400rpx;
    height: 400rpx;
    border-radius: 200rpx;
    background-color: #4e5055;
    border: 6rpx solid #b7b8b9;
  }
  .clocker {
    display: flex;
    justify-content: space-between;
    .clocker-item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .out-time {
      font-size: 22rpx;
      color: #bbb;
    }
  }
  .controller {
    position: absolute;
    left: 50%;
    top: 70%;
    transform: translate(-50%, -50%);
    width: 610rpx;
  }
  .player {
    position: relative;
    width: 100%;
    height: 80rpx;
    border-radius: 40rpx;
    box-shadow: -2rpx -2rpx 6rpx 2rpx #fff;
    background-color: #eaeaea;
    margin-top: 60rpx;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    &::after {
      content: '';
      display: block;
      width: 100%;
      height: 80rpx;
      border-radius: 40rpx;
      position: absolute;
      z-index: -1;
      box-shadow: 2rpx 2rpx 6rpx 2rpx #898a8c;
    }
    .play {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      background-color: #eaeaea;
      box-shadow: 2rpx 2rpx 6rpx 2rpx #898a8c;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 1;
      &::after {
        content: '';
        display: block;
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        position: absolute;
        box-shadow: -2rpx -2rpx 6rpx 2rpx #fff;
      }
    }
  }
  .animation {
    :hover {
      animation: scale 0.3s linear;
    }
  }
  @keyframes scale {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
    100% {
      transform: scale(1);
    }
  }
  .time-view {
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    margin: 12rpx 0;
    color: #bbb;
  }
}

.coltroller-left {
  display: flex;
  align-items: center;
}
.coltroller-right {
  display: flex;
  align-items: center;
}
.progress-wrapper {
  width: 100%;
  box-sizing: border-box;
}
.time-text {
  max-width: 80rpx;
  font-size: 26rpx;
}
.progress-bar {
  position: relative;
  width: 100%;
  height: 6rpx;
  background: rgba(#8f8888, 0.5);
  border-radius: 3rpx;
}
.van-progress__portion {
  position: absolute;
  left: 0;
  height: 100%;
  background: #9770f3;
  border-radius: inherit;
}

.play-dot {
  position: absolute;
  top: 50%;
  box-sizing: border-box;
  color: #fff;
  line-height: 1.6;
  text-align: center;
  word-break: keep-all;
  background-color: #9770f3;
  border-radius: 1em;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 32rpx;
  height: 32rpx;
  min-width: 0;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-row {
  display: flex;
}
.justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.size-12 {
  font-size: 24rpx;
}
</style>
